<template>
  <div class="pageContent">
    <!-- 顶部 -->
    <div class="top flexAround">
      <div class="top_content">
        <div class="top_content_title">工资支付总额</div>
        <div
          class="top_content_content"
        >{{isNull(parseFloat((this.topData.wageTotal)).toFixed(2))}}元</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">工资支付记录</div>
        <div
          class="top_content_content"
        >{{isNull(parseFloat((this.topData.recordTotal)).toFixed(0))}}次</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">工资支付人次</div>
        <div
          class="top_content_content"
        >{{isNull(parseFloat((this.topData.personTotal)).toFixed(0))}}人次</div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div class="content">
      <div class="center flexBetween">
        <div class="center_title">工资支付列表</div>
        <div>
          <a-radio-group v-model="radioModel" @change="onChange">
            <a-radio-button value="all">全部</a-radio-button>
            <a-radio-button value="present">进行中</a-radio-button>
            <a-radio-button value="exit">已完成</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="atable">
        <div style="margin-bottom:15px">
          <a-button type="primary" @click="addCompany" icon="plus">新建工资单</a-button>
        </div>
        <!-- 表格选中多少项 -->
        <div style="margin-bottom:20px">
          <a-alert type="info">
            <p slot="description">
              <a-icon type="exclamation-circle" style="color:#1890FF;margin-right:5px" />已选择
              <span style="color:#1890FF;margin:0 5px">{{this.selectedRowKeys.length}}</span>项
              <span style="margin-left:10px">工资支付小计：</span>
              <span style="font-weight:600;color:#000">{{selectTotal}}</span> 元
              <span style="color:#1890FF;margin:0 5px;cursor: pointer;" @click="empty">清空</span>
            </p>
          </a-alert>
        </div>
        <a-table
          :columns="columns"
          :data-source="data"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <span slot="status" slot-scope="text,record">
            <a-tag color="green" v-if="record.payFinishTotal==record.teamTotal">已完成</a-tag>
            <span v-else>{{record.payFinishTotal}}/{{record.teamTotal}}</span>
            <!-- {{record}} -->
          </span>
          <span slot="action" slot-scope="text, record">
            <a style="color:#1890FF;margin-right:10px" @click="onDetail(text, record)">详情</a>
          </span>
        </a-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>

    <!-- 对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visible"
        title="新增工资单"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
       :centered='true'
      >
       <!-- width="1000px" -->
        <a-form-model
          ref="ruleForm"
          :model="form"
          v-if="visible"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="time" label="工资月份" prop="time">
            <a-month-picker
              v-model="form.time"
              type="date"
              style="width: 100%;"
              @change="timeChange"
            />
          </a-form-model-item>
          <a-form-model-item ref="name" label="工资单名称" prop="name" placeholder="请输入工资单名称">
            <a-input v-model="form.name" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="explain" label="工资单说明" prop="explain">
            <a-textarea v-model="explain" placeholder="请输入说明" :auto-size="textSize" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>


<script>
import moment from 'moment'
import { uploadOSS } from '@/utils/oss.js'
import { wageAdd, wageQuery, wageUpdate } from '@/api/wageSheet'
export default {
  data() {
    return {
      radioModel: 'all',
      columns: [
        { title: '工资单名称', dataIndex: 'title', key: 'title', align: 'center' },
        { title: '工资月份', dataIndex: 'wageMonth', key: 'wageMonth', align: 'center' },
        { title: '班组数', dataIndex: 'teamTotal', key: 'teamTotal', align: 'center' },
        { title: '支付总人数', dataIndex: 'personTotal', key: 'personTotal', align: 'center' },
        { title: '状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' }, align: 'center' },
        { title: '已支付小计（元）', dataIndex: 'wageTotal', key: 'wageTotal', align: 'center' },

        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      data: [],
      current: 1,
      pageSize: 10,
      total: 1,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      visible: false,
      form: {
        // time:[moment('2015-10-02'.getTime()).format('YYYY-MM-DD') , moment('2015-10-10'.getTime()).format('YYYY-MM-DD')]
        explain: {},
        time: moment('2021-02-02'),
        name: '【2020-02】劳务工资'
      },
      explain: '',
      selectedRowKeys: [],
      type: [
        {
          key: 'public',
          lable: '公共'
        },
        {
          key: 'default',
          lable: '私有'
        }
      ],
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      selectTotal: 0,
      textSize: { minRows: 3, maxRows: 6 },
      topData: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let data = {
        page: this.current,
        size: this.pageSize
      }
      this.data = []
      wageQuery(data).then((res) => {
        this.topData.personTotal = res.data.data.personTotal
        this.topData.recordTotal = res.data.data.recordTotal
        this.topData.wageTotal = res.data.data.wageTotal
        res.data.data.wageSheetVOList.forEach((item, index) => {
          item.key = item.id
          this.data.push(item)
        })
        // console.log(this.data)
      })
    },
    isNull(val) {
      if (isNaN(val) == true) {
        return 0
      } else {
        return val
      }
    },
    moment,
    onChange(e) {
      console.log(e.target.value)
    },
    onDetail(text) {
      sessionStorage.setItem('sheedId', text.id)
      this.$router.push({ path: '/migrantWages/unitAccount', query: { dataId: text.id } })
    },
    handleOk() {
      this.visible = false
      let data = {
        orgId: '',
        projectId: '',
        remarks: '',
        title: '',
        wageMonth: ''
      }
      data.title = this.form.name
      data.wageMonth = moment(this.form.time).format('YYYY-MM')
      data.remarks = this.explain
      wageAdd(data).then((res) => {
        // console.log(res)
        this.$message.success('新建成功')
        this.getData()
      })
    },
    addCompany() {
      this.visible = true
      this.form.explain = []
      this.form.time = moment(new Date())
      this.form.name = '【' + moment(this.form.time).format('YYYY-MM') + '】' + '劳务工资'
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getData()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getData()
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
      // console.log( this.selectedRowKeys);
      this.selectTotal = 0
      let _this = this
      this.selectedRowKeys.forEach((item, index) => {
        // let key = item
        // console.log(key,index);

        // console.log(_this.data[index]);
        this.selectTotal = this.selectTotal + (this.data[index].wageTotal - 0)
        this.selectTotal = parseFloat(this.selectTotal.toFixed(2))
      })
    },
    empty() {
      this.selectedRowKeys = []
      this.selectTotal = 0
    },
    timeChange(val) {
      let time = moment(val).format('YYYY-MM')
      this.form.name = '【' + time + '】' + '劳务工资'
    }
  }
}
</script>

<style scoped>
.flexAround {
  width: 100%;
}
.atable {
  width: 100%;
}
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 15px 30px;
}
.center {
  margin-bottom: 20px;
}
.content {
  background: #fff;
  padding: 15px 0px;
  margin-bottom: 15px;
  width: 100%;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ccc;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.center_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
::v-deep .ant-alert-with-description .ant-alert-message {
  margin-bottom: 0;
}
::v-deep .ant-alert-with-description.ant-alert-no-icon {
  padding: 4px;
}
p {
  margin: 0;
  padding-left: 20px;
}
/* ::v-deep .ant-form-item {
  margin-bottom: 0;
} */
</style>